Font Design & Control 字型設計與控制

Hinting 字型微調

字型微調是一種讓小字型在舊式顯示器上看起來更清晰的技術。它透過在字型檔案裡新增特殊指令來實現這一點。

現在我們有了更好的高畫質顯示器,字型微調已經不那麼重要了。以前的顯示器畫素較少,小字型容易看不清,所以需要這種技術來幫助電腦正確顯示文字。

為了讓字型顯示得更好看,還可以用"抗鋸齒"技術。這種技術能讓字型邊緣看起來更平滑,不會有參差不齊的感覺。它透過調整畫素的顏色深淺,甚至可以分別控制紅綠藍三種顏色來達到這個效果。

總的來說,雖然現在的字型檔案還會包含微調功能,但因為大多數人都在用高畫質顯示器,這項技術已經沒有以前那麼重要了。

Kerning & kerning pairs 字距調整

字距調整很簡單,就是調整兩個字之間的空隙。當字型設計師把這些調整直接做在字型檔案裡時,我們就叫它字距對。

要注意,字距調整和字間距是不一樣的。字距調整隻改變兩個特定字之間的距離,而字間距是調整整段文字中所有字之間的距離。

現在的字型用了一個聰明的方法:把相似的字分成一組。比如"V"和"W"這樣形狀接近的字放在一組,這樣調整起來更方便。

瀏覽器裡的CSS預設會使用字型裡的字距調整設定。如果你不想要這個效果,可以用font-kerning: none;來關掉它。

p {
	font-size: 16px;
	line height:150%; /* Equivalent to 24px */
}

Tracking, or letter-spacing 字距微調

字距微調就是調整一段文字中所有字之間的距離。在寫網頁CSS程式碼時,用letter-spacing來設定這個距離。字與字之間的距離可以設定得緊一些,適中,或者鬆一些。

如果是全部都是大寫字母的文字,適當加大字距會讓它更容易看清楚。但如果是特別大的裝飾性文字,有時候反而需要把字距調小一點。

很多人會搞不清楚"字距微調"和"字距調整"的區別。簡單來說,字距微調是調整整段文字所有字之間的距離,而字距調整是專門調整某兩個字之間的距離,比如設計logo的時候經常會用到。

Lockup 元素鎖定

元素鎖定是指把不同設計元素(如品牌標誌和文字標誌)按固定方式排列組合。以一個虛構品牌的標誌為例,藍色部分顯示了經過加粗處理的變音符號,紅色部分則展示了這個鎖定組合特有的對齊和間距準則。元素鎖定也可以只用文字。比如一個雙行文字標誌,文字大小、行間距和整體位置都構成了一個鎖定組合。